*{margin: 0;padding: 0}
ul,li {list-style: none}
.slider-container{
  width: 400px;height: 300px;border: 5px solid red;margin: 0 auto;
  position: relative;overflow: hidden;
  ul{
    position: absolute;height: 300px;left: 0;top:0;
    li{
      width: 400px;height: 300px;float: left;
      img{width:100%;height: 100%}
    }
  }
  .slider-arrows{
    position: absolute;
    width: 100%;
    height: 40px;
    top:50%;
    transform: translateY(-50%);
    left: 0;
    span{
      width: 30px;height: 40px;
      display: block;background: #fff;
      text-align: center;line-height: 40px;
      -webkit-user-select: none;
      cursor: pointer;
      &:nth-child(1){float: left;}
      &:nth-child(2){ float: right;}
    }

  }
  .slider-dots{
    position: absolute;width: 100%;left:0;bottom: 20px;text-align: center;
    span{
      background: #fff;display: inline-block;width: 20px;height: 20px;border-radius: 50%;margin: 3px;cursor: pointer;
      &.active{background: rgba(233,222,100,0.8);

      }
    }
  }
}